<template>
  <div class="login-page">
    <BrandHeader>
      <button class="skip-btn" @click="skip">暂不注册</button>
    </BrandHeader>
    <div class="shell" role="main">
      <!-- 左侧：品牌展示 -->
      <section class="left-hero" aria-label="品牌展示">
        <div class="hero-card">
          <img class="hero-logo" src="/logo.png" alt="品牌标志" onerror="this.style.display='none'" />
          <img class="hero-slogan" src="/logo2.png" alt="发现电影惊喜 邂逅专属热爱" onerror="this.style.display='none'" />
        </div>
      </section>

      <!-- 中间分隔线 -->
      <div class="divider" aria-hidden="true"></div>

      <!-- 右侧：注册表单 -->
      <section class="right-panel" aria-label="注册">
        <div class="login-container">
          <div class="login-title">注册</div>
          <!-- 仅允许输入7位数字编号 -->
          <input
            v-model="code"
            placeholder="请输入你的7位编号（仅数字）"
            class="login-input"
            inputmode="numeric"
            pattern="\\d{7}"
            maxlength="7"
            @input="onCodeInput"
          />

          <!-- 展示自动生成的用户ID与用户名 -->
          <div v-if="code.length === 7" class="gen-box">
            <div class="gen-line">你的用户ID：<b>{{ generatedId }}</b></div>
            <div class="gen-line">用户名将设置为：<b>{{ generatedUsername }}</b></div>
          </div>

          <input
            v-model="password"
            type="password"
            placeholder="设置登录密码（6位及以上）"
            class="login-input"
            @keyup.enter="doRegister"
          />

          <button @click="doRegister" class="login-btn">注册</button>
          <div v-if="error" class="login-error">{{ error }}</div>
          <div v-if="success" class="login-success">{{ success }}</div>
          <div class="login-tip">已有账号？<router-link class="link" to="/login">去登录</router-link></div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import BrandHeader from '@/components/BrandHeader.vue';
import { register } from '../services/api';
import { useRouter } from 'vue-router';

export default {
  name: 'RegisterPage',
  components: { BrandHeader },
  setup() {
    const code = ref('');
    const password = ref('');
    const error = ref('');
    const success = ref('');
    const router = useRouter();

  const generatedId = computed(() => code.value.length === 7 ? code.value : '');
    const generatedUsername = computed(() => generatedId.value ? `用户${generatedId.value}` : '');

    function onCodeInput(e) {
      // 只保留数字，限制长度7
      const digits = String(e.target.value || '').replace(/\D/g, '').slice(0,7)
      code.value = digits
    }

    async function doRegister() {
      error.value = '';
      success.value = '';
      try {
        if (code.value.length !== 7) {
          error.value = '请输入7位数字编号'
          return
        }
        if (!password.value || password.value.length < 6) {
          error.value = '请设置不少于6位的密码'
          return
        }
  await register(code.value, password.value);
  success.value = '注册成功，正在跳转到登录页...';
  router.push('/login');
      } catch (e) {
        error.value = e.response?.data?.detail || '注册失败';
      }
    }

    function skip() {
      router.push('/recommend')
    }

  return { code, password, error, success, doRegister, skip, generatedId, generatedUsername, onCodeInput };
  }
}
</script>
<style scoped>
.login-page { min-height: 100vh; background: #0f0f0f; color: #fff; }
.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 24px 48px;
  display: grid;
  grid-template-columns: 1.1fr auto 1.4fr;
  column-gap: 36px;
  align-items: stretch;
}

/* 左侧品牌区（与登录一致） */
.left-hero { display: flex; align-items: center; }
.hero-card {
  width: 100%;
  min-height: 420px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.hero-logo { width: 200px; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); margin-bottom: 12px; }
.hero-slogan { width: 340px; max-width: 70%; height: auto; margin: 6px 0 2px; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); }

/* 分隔线 */
.divider {
  width: 2px; align-self: center; height: 82%;
  background: linear-gradient(180deg, #ff8a65 0%, #ff4e4e 50%, #ff8a65 100%);
  border-radius: 2px; box-shadow: 0 0 10px rgba(255, 78, 78, 0.35);
}

/* 右侧卡片 */
.right-panel { display: flex; align-items: center; justify-content: center; }
.login-container {
  width: 560px; background: #141414; border: 1px solid #222; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  padding: 38px 32px 28px; display: flex; flex-direction: column; align-items: center;
}
.login-title { font-size: 26px; font-weight: 800; color: #ff4e4e; margin-bottom: 22px; letter-spacing: 1.6px; }
.login-input { width: 100%; padding: 14px 18px; margin-bottom: 20px; border: 1px solid #2a2a2a; border-radius: 8px; font-size: 1.05rem; background: #1a1a1a; color: #eee; transition: border 0.2s, background 0.2s; }
.login-input:focus { border: 1.5px solid #ff4e4e; outline: none; background: #171717; }
.login-btn { width: 100%; padding: 14px 0; background: #ff4e4e; color: #fff; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer; margin-bottom: 12px; transition: background 0.2s, transform .1s ease; }
.login-btn:hover { background: #ff3333; transform: translateY(-1px); }
.login-error { color: #ff9494; margin-top: 8px; font-size: 0.95rem; }
.login-success { color: #66bb6a; margin-top: 8px; font-size: 0.95rem; }
.login-tip { margin-top: 10px; color: #9aa0a6; font-size: 14px; }
.login-tip .link { color: #ff6b57; text-decoration: none; font-weight: 700; font-size: 14px; }
.login-tip .link:hover { color: #ff4e4e; text-decoration: underline; }

.gen-box { width: 100%; color: #bbb; font-size: 14px; margin: -8px 0 12px; }
.gen-line { margin: 4px 0; }

/* 已移除密码强度提示样式 */

/* 顶部右侧“暂不注册”按钮 */
.skip-btn {
  background: #ff4e4e; color: #fff; border: 1px solid #ff4e4e;
  border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.skip-btn:hover { background: #ff3333; border-color: #ff3333; transform: translateY(-1px); }
</style>